import React from 'react';
import { Layout, Input, message, List, Tooltip } from 'antd';
import { Link } from 'react-router-dom';
import { CalendarOutlined } from '@ant-design/icons/lib';
import moment from 'moment';

const { Content } = Layout;

export default class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search: '',
      lastSearch: null,

      searchData: null,
    };
  }

  formatTime(time) {
    return moment(parseInt(new Date(time).getTime())).format('YYYY-MM-DD HH:mm');
  }

  onBlur() {
    if (this.state.search === this.state.lastSearch) {
      return;
    }

    this.setState({ lastSearch: this.state.search });
    this._search();
  }

  _search() {
    if (this.state.search === this.state.lastSearch || this.state.search === '') {
      return;
    }

    window.$http.get('/api/v1/article/search?data=' + this.state.search).then((res) => {
      console.log(res);
      this.setState({ searchData: res, lastSearch: this.state.search });
    }).catch((reason => {
      console.log('reason', reason.message);
      message.error('服务异常');
      this.setState({ spinning: false });
    }));
  }


  render() {
    return (
      <Content className="site-layout" style={{ padding: '0 20px', marginTop: 5 }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
          <Input placeholder="请输入需要搜索的关键字" value={this.state.search}
                 size={'large'}
                 onChange={(event) => this.setState({
                   search: event.target.value,
                 })}
                 onBlur={(event) => {
                   this._search();
                 }}
                 onPressEnter={(event) => {
                   this._search();
                 }}
          />

          {this.state.searchData ? <List
            style={{ backgroundColor: '#f6f6f6', margin: '10px auto', padding: 10 }}
            size="large"
            pagination={{
              pageSize: 10,
            }}
            dataSource={this.state.searchData}
            renderItem={item => (
              <List.Item
                style={{ height: 100, textAlign: 'left' }}
                key={item.id}
                extra={
                  <img
                    height={50}
                    alt={item.cover_image_url}
                    src={item.cover_image_url}
                  />
                }
              >
                <List.Item.Meta
                  title={<div>
                    <Link to={'/detail?id=' + item.id} style={{ color: 'rgba(0, 0, 0, 0.65)' }}>{item.title}</Link>
                    <Tooltip placement="topRight" title="创建时间">
                      <span
                        style={{ cursor: 'help', marginLeft: 30 }}><CalendarOutlined/>{this.formatTime(item.created_at)}
                      </span>
                    </Tooltip>
                    <Tooltip placement="topRight" title="更新时间">
                      <span
                        style={{ cursor: 'help', marginLeft: 10 }}><CalendarOutlined/>{this.formatTime(item.updated_at)}
                      </span>
                    </Tooltip>
                  </div>}
                  description={item.desc}
                />
              </List.Item>
            )}
          /> : null
          }
        </div>
      </Content>
    );
  }
}
